import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
// import styles from './ChooseModal.less';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Button,
	Modal,
	Tag,
	message,
	Badge,
	Radio,
	Tree,
	Icon,
} from 'antd';

const FormItem = Form.Item;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const TreeNode = Tree.TreeNode;

@Form.create()
export default class ChannelModal extends PureComponent {
	constructor(props) {
		super(props);
		console.log('初始化数据', this.props.initValue);
	}

	state = {
		expandedKeys: [],
		autoExpandParent: true,
		checkedKeys: [],
		selectedKeys: [],

		checkedNumber: 0,
	};

	componentWillReceiveProps(nextProps) {
		if (nextProps.contentIdList && (nextProps.contentIdList != this.props.contentIdList)) {
			console.log('父页面初始数据=========', nextProps.contentIdList);
			// let newList = []
			// for (let i = 0; i < nextProps.contentIdList.length; i++) {
			// 	newList.push('' + nextProps.contentIdList[i].channelId)
			// }

			this.setState({ checkedKeys: nextProps.contentIdList , checkedNumber: nextProps.contentIdList.length })
		}
	}

	onCheck = (checkedKeys, { halfCheckedKeys }) => {
		console.log('onCheck', checkedKeys);
		console.log('halfCheckedKeys', halfCheckedKeys);

		let checkedNumber = (checkedKeys.filter(item => ((item != 1) && (item != 2) && (item != 3) && (item != 4)))).length

		this.setState({ checkedKeys, checkedNumber });
	}

	onSelect = (selectedKeys, info) => {
		console.log('onSelect', info);
		this.setState({ selectedKeys });
	}

	onExpand = (expandedKeys) => {
		console.log('onExpand', expandedKeys);
		// if not set autoExpandParent to false, if children expanded, parent can not collapse.
		// or, you can remove all expanded children keys.
		this.setState({
			expandedKeys,
			autoExpandParent: false,
		});
	}

	renderTreeNodes = (data) => {
		return data.map((item) => {
			if (item.children) {
				return (
					<TreeNode title={item.title} key={item.key} dataRef={item}  >
						{this.renderTreeNodes(item.children)}
					</TreeNode>
				);
			}
			return <TreeNode {...item} />;
		});
	}

	onChange() {

	}

	_okHandle() {
		if (this.state.checkedKeys && (this.state.checkedKeys.length > 0)) {
			this.props.channelOk(this.state.checkedKeys.filter(item => ((item != 1) && (item != 2) && (item != 3) && (item != 4))));

			this.props.setChannelModalVisible(2, false)
		} else {
			message.error('请选择频道')
			return;
		}
	}

	_cancel() {
		this.props.setChannelModalVisible(2, false);
		this.setState({
			checkedKeys: this.props.contentIdList,
		})
	}

	render() {
		return (
			<Modal
				// width={800}
				destroyOnClose
				title="选择频道"
				visible={this.props.channelModalVisible}
				afterClose={() => { }}
				onOk={() => this._okHandle()}
				onCancel={() => this._cancel()}
			>
				<div>
					<div>已选频道（ {this.state.checkedNumber} ）</div>
					<div style={{ height: '500px', overflow: 'auto' }}>
						<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="请勾选频道">
							{this.props.form.getFieldDecorator('checkedKeys', {
								rules: [{ required: true, message: '请勾选频道' }],
								initialValue: (this.props.initValue && this.props.initValue.checked_all_keys) || null,
							})(
								<Tree
									checkable
									onExpand={this.onExpand}
									showLine={true}
									expandedKeys={this.state.expandedKeys}
									autoExpandParent={this.state.autoExpandParent}
									onCheck={this.onCheck}
									// checkedKeys={(this.props.initValue && this.props.initValue.checked_child_keys) ? (this.props.initValue.checked_child_keys).replace("[","").replace("]","").replace(/\"/g,"").split(',') : null}
									checkedKeys={this.state.checkedKeys}
								// onSelect={this.onSelect}
								// selectedKeys={(this.props.initValue && this.props.initValue.checked_all_keys) ? Array.from(this.props.initValue.checked_all_keys) : null}
								// checkStrictly={true}
								>
									{this.renderTreeNodes(this.props.channelTree)}
								</Tree>
							)}
						</FormItem>

					</div>
				</div>


			</Modal>
		)
	}

}